<template>
  <el-form
    :model="dataForm"
    :rules="dataRule"
    ref="dataForm"
    label-width="150px"
  >
    <el-alert
      :title="dataForm.errMsg"
      v-if="dataForm.errMsg && dataForm.state !== 1"
      type="warning"
      style="margin-top: 20px; width: 90%; margin-left: 5%"
    >
    </el-alert>
    <el-steps :active="step" finish-status="success" class="step_class" simple>
      <el-step title="基本信息" icon="el-icon-edit"> </el-step>
      <el-step title="结算账户" icon="el-icon-user"></el-step>
      <el-step title="上传图片" icon="el-icon-upload"></el-step>
      <el-step title="完成" icon="el-icon-success"></el-step>
    </el-steps>
    <span v-if="step === 1">
      <el-form-item label="资质类型：" prop="haveLicenseNo">
        <el-radio-group
          v-model="dataForm.haveLicenseNo"
          aria-placeholder="请选择资质类型"
        >
          <el-radio label="01">企业（有营业执照）</el-radio>
          <el-radio label="02">个人（无营业执照）</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商户名称：" prop="merchantName">
        <el-input
          class="input"
          v-model="dataForm.merchantName"
          placeholder="请输入商户名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="商户所在地区：" prop="regDistCd">
        <el-cascader
          v-model="merchants"
          :options="merchantArea"
          ref="regArea"
          @change="handleMerchantAreaChange"
        ></el-cascader>
        <span class="warn">*企业传注册地址，个人传实际经营地址信息</span>
      </el-form-item>
      <el-form-item label="商户详细地址：" prop="cprRegAddr">
        <el-input
          class="input"
          v-model="dataForm.cprRegAddr"
          placeholder="请输入商户详细地址"
        ></el-input>
        <span class="warn">*企业传注册地址，个人传实际经营地址信息</span>
      </el-form-item>
      <el-form-item
        label="营业执照注册名称："
        prop="cprRegNmCn"
        v-if="dataForm.haveLicenseNo === '01'"
      >
        <el-input
          class="input"
          v-model="dataForm.cprRegNmCn"
          placeholder="请输入营业执照注册名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="营业执照号："
        prop="registCode"
        v-if="dataForm.haveLicenseNo === '01'"
      >
        <el-input
          class="input"
          v-model="dataForm.registCode"
          placeholder="请输入营业执照号"
        ></el-input>
      </el-form-item>
      <el-form-item label="商户类别码：" prop="mccCd">
        <el-select
          v-model="dataForm.mccCd"
          filterable
          placeholder="请选择商户类别码"
        >
          <el-option
            v-for="(item, index) in mccList"
            :key="index"
            :value="item.mcc"
            :label="item.title"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="法人姓名：" prop="identityName">
        <el-input
          class="input"
          v-model="dataForm.identityName"
          placeholder="请输入法人姓名"
        ></el-input>
        <span class="warn"
          >*个人资质时，传入商户负责人姓名，且与商户联系电话
          的归属人必须为同一自然人</span
        >
      </el-form-item>

      <el-form-item label="法人身份证号：" prop="identityNo">
        <el-input
          class="input"
          v-model="dataForm.identityNo"
          placeholder="请输入法人身份证号"
        ></el-input>
        <span class="warn">*个人资质时，传入商户负责人身份证号</span>
      </el-form-item>

      <el-form-item label="客服电话：" prop="csTelNo">
        <el-input
          class="input"
          v-model="dataForm.csTelNo"
          placeholder="请输入客服电话"
        ></el-input>
        <span class="warn">*建议传入接入方客服电话，在交易详情会展示</span>
      </el-form-item>
    </span>

    <!-- 结算账户 -->
    <span v-else-if="step === 2">
      <el-form-item label="结算账户类型：" prop="actTyp">
        <el-radio-group
          v-model="dataForm.actTyp"
          aria-placeholder="请选择结算账户类型"
        >
          <el-radio label="00">对公</el-radio>
          <el-radio label="01">对私</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="结算账户姓名：" prop="bankAccountName">
        <el-input
          class="input"
          v-model="dataForm.bankAccountName"
          placeholder="请输入结算账户姓名"
        ></el-input>
        <span class="warn">*对私结算必填</span>
      </el-form-item>
      <el-form-item label="结算人身份证号：" prop="stmManIdMo">
        <el-input
          class="input"
          v-model="dataForm.stmManIdMo"
          placeholder="请输入结算人身份证号"
        ></el-input>
        <span class="warn">*对私结算必填</span>
      </el-form-item>
      <el-form-item label="结算卡号：" prop="actNo">
        <el-input
          class="input"
          v-model="dataForm.actNo"
          placeholder="请输入结算卡号"
        ></el-input>
      </el-form-item>
      <el-form-item label="开户行所在地区：" prop="regDistCd">
        <el-cascader
          v-model="bankAreas"
          :options="bankAreaList"
          ref="bankAreaRef"
          @change="handleBankAreaChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="开户行总行行号：" prop="bnkCd">
        <el-select
          v-model="dataForm.bnkCd"
          ref="bankRef"
          @change="bankChangeHandle"
          filterable
          placeholder="请选择开户行总行行号"
        >
          <el-option
            v-for="(item, index) in bankList"
            :key="index"
            :value="item.code"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开户支行：" prop="lbnkNm">
        <!-- fhList -->
        <el-select
          v-model="dataForm.lbnkNo"
          ref="fhRef"
          @change="
            dataForm.lbnkNm = fhList.filter(
              (res) => res.lbnkNo === dataForm.lbnkNo
            )[0].lbnkNm
          "
          style="width: 50%"
          filterable
          placeholder="请选择开户支行"
        >
          <el-option
            v-for="(item, index) in fhList"
            :key="index"
            :value="item.lbnkNo"
            :label="item.lbnkNm"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户联系电话：" prop="mblNo">
        <el-input
          class="input"
          v-model="dataForm.mblNo"
          placeholder="请输入商户联系电话"
        ></el-input>
        <span class="warn">*企业填法人电话，个人商户填个入账卡预留手机号</span>
      </el-form-item>
      <!-- <el-form-item label="分成比例：" prop="scale">
        <el-input-number
          :controls="false"
          class="input"
          v-model="dataForm.scale"
          placeholder="请输入分成比例"
        ></el-input-number>
        <span class="warn">*单位（百分比）</span>
      </el-form-item> -->
    </span>

    <!-- 图片上传 -->
    <span v-else-if="step === 3">
      <el-form-item label="结算对象：">
        <el-radio-group v-model="jsType" aria-placeholder="请选择结算对象">
          <el-radio label="00">对公结算</el-radio>
          <el-radio label="01">对法人结算</el-radio>
          <el-radio label="02">对非法人结算</el-radio>
          <el-radio label="03">小微用户</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 营业执照 -->
      <el-form-item label="营业执照：" v-if="jsType !== '03'">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'licensePic', id: dataForm.id }"
          :on-success="uploadLicenseSuccess"
        >
          <el-image
            :src="fileJson.licensePic"
            style="width: 100%"
            v-if="fileJson.licensePic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
      </el-form-item>

      <!-- 法人身份证照片 -->
      <el-form-item label="法人身份证：" v-if="jsType !== '03'">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          style="float: left"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'legalPersonidPositivePic', id: dataForm.id }"
          :on-success="uploadlegalPersonidPositivePicSuccess"
        >
          <el-image
            :src="fileJson.legalPersonidPositivePic"
            style="width: 100%"
            v-if="fileJson.legalPersonidPositivePic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 法人身份证正面 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
        <el-upload
          class="upload-demo"
          drag
          style="float: left; margin-left: 20px"
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'legalPersonidOppositePic', id: dataForm.id }"
          :on-success="uploadlegalPersonidOppositePicSuccess"
        >
          <el-image
            :src="fileJson.legalPersonidOppositePic"
            style="width: 100%"
            v-if="fileJson.legalPersonidOppositePic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 法人身份证反面 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
      </el-form-item>

      <!-- 开户证明 -->
      <el-form-item label="开户许可证照：" v-if="jsType === '00'">
        <el-upload
          class="upload-demo"
          drag
          style="float: left; margin-left: 20px"
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'openingAccountLicensePic', id: dataForm.id }"
          :on-success="uploadopeningAccountLicensePicSuccess"
        >
          <el-image
            :src="fileJson.openingAccountLicensePic"
            style="width: 100%"
            v-if="fileJson.openingAccountLicensePic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 开户许可证或银行出具的开户证明样本 文件拖到此处，或<em
                >点击上传</em
              >
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
      </el-form-item>

      <!--  非法人身份身份证照 -->
      <el-form-item
        label="法人身份证："
        v-if="jsType === '02' || jsType === '03'"
      >
        <el-upload
          class="upload-demo"
          drag
          style="float: left"
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'settlePersonIdcardPositive', id: dataForm.id }"
          :on-success="uploadsettlePersonIdcardPositiveSuccess"
        >
          <el-image
            :src="fileJson.settlePersonIdcardPositive"
            style="width: 100%"
            v-if="fileJson.settlePersonIdcardPositive"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 结算人身份证正面 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          style="float: left; margin-left: 20px"
          :data="{ fileName: 'settlePersonIdcardOpposite', id: dataForm.id }"
          :on-success="uploadsettlePersonIdcardOppositePicSuccess"
        >
          <el-image
            :src="fileJson.settlePersonIdcardOpposite"
            style="width: 100%"
            v-if="fileJson.settlePersonIdcardOpposite"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 结算人身份证反面 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
      </el-form-item>

      <!-- 银行卡号 -->
      <el-form-item
        label="银行卡照："
        v-if="jsType === '02' || jsType === '03'"
      >
        <el-upload
          class="upload-demo"
          drag
          style="float: left"
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'bankCardPositivePic', id: dataForm.id }"
          :on-success="uploadbankCardPositivePicSuccess"
        >
          <el-image
            :src="fileJson.bankCardPositivePic"
            style="width: 100%"
            v-if="fileJson.bankCardPositivePic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 银行卡号正面 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          style="float: left; margin-left: 20px"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'bankCardOppositePic', id: dataForm.id }"
          :on-success="uploadbankCardOppositePicPicSuccess"
        >
          <el-image
            :src="fileJson.bankCardOppositePic"
            style="width: 100%"
            v-if="fileJson.bankCardOppositePic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 银行卡号反面 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
      </el-form-item>

      <!-- 门头照片 -->
      <el-form-item label="门头照：">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'storePic', id: dataForm.id }"
          :on-success="uploadstorePicSuccess"
        >
          <el-image
            :src="fileJson.storePic"
            style="width: 100%"
            v-if="fileJson.storePic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 门头照片 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
      </el-form-item>

      <!-- 非法人结算授权函 -->
      <el-form-item label="非法人结算授权函：" v-if="jsType === '02'">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :data="{ fileName: 'letterOfAuthPic', id: dataForm.id }"
          :on-success="uploadletterOfAuthPicSuccess"
        >
          <el-image
            :src="fileJson.letterOfAuthPic"
            style="width: 100%"
            v-if="fileJson.letterOfAuthPic"
          ></el-image>
          <span v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将 非法人结算授权函 文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </span>
        </el-upload>
      </el-form-item>
    </span>
    <span style="text-align: center; display: block; padding: 60px 0" v-else>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      提交审核成功，请耐心等待……
    </span>
    <el-form-item style="margin: 30px auto 0 -200px; text-align: center">
      <el-button type="primary" @click="step -= 1" v-if="step > 1 && step < 4"
        >上一步</el-button
      >
      <el-button
        type="primary"
        :loading="buttonLoad"
        @click="submit"
        v-if="step < 4"
        >{{ step === 4 ? "确定" : "下一步" }}</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script>
import { mArea, mcc, bank, bankArea } from "../../../api/params";
import {
  list,
  add,
  del,
  update,
  detail,
  inquire,
  getlbk,
} from "@/api/app_pages/separateUser";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      step: 1,
      merchantArea: [],
      merchants: [],
      mccList: [],
      bankList: [],
      bankAreaList: [],
      bankAreas: [],
      fhList: [],
      jsType: "03",
      uploadUrl: process.env.VUE_APP_BASE_API + "/upload/user",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      dataForm: {
        merchantName: "",
        haveLicenseNo: "02",
        cprRegNmCn: "",
        registCode: "",
        cprRegAddr: "",
        regProvCd: "",
        regCityCd: "",
        regDistCd: "",
        rate: 0.008,
        mccCd: "",
        csTelNo: "",
        identityName: "",
        identityNo: "",
        actTyp: "00",
        bankAccountName: "",
        stmManIdMo: "",
        actNo: "",
        bnkCd: "",
        bnkNm: "",
        lbnkProv: "",
        lbnkCity: "",
        lbnkNo: "",
        lbnkNm: "",
        mblNo: "",
        scale: 0,
      },
      fileJson: {
        licensePic: "", //营业执照上传成功
        legalPersonidPositivePic: "", //法人身份证正面
        legalPersonidOppositePic: "", //法人身份证反面
      },
      buttonLoad: false,
    };
  },
  computed: {
    dataRule() {
      return {
        haveLicenseNo: [
          { required: true, message: "请选择资质类型", trigger: "blur" },
        ],
        merchantName: [
          { required: true, message: "请选择商户名称", trigger: "blur" },
        ],
        regDistCd: [
          { required: true, message: "请选择商户所在地区", trigger: "blur" },
        ],
        cprRegAddr: [
          { required: true, message: "请输入商户详细地址", trigger: "blur" },
        ],
        mccCd: [
          { required: true, message: "请选择商户类别码", trigger: "blur" },
        ],
        // scale: [{ required: true, message: "请输入分账比例", trigger: "blur" }],
        identityName: [
          { required: true, message: "请选择法人姓名", trigger: "blur" },
        ],
        csTelNo: [
          { required: true, message: "请选择客服电话", trigger: "blur" },
        ],
        actTyp: [
          { required: true, message: "请选择结算账户类型", trigger: "blur" },
        ],
        lbnkNm: [
          { required: true, message: "请选择开户支行", trigger: "blur" },
        ],
        actNo: [{ required: true, message: "请输入结算卡号", trigger: "blur" }],
      };
    },
  },
  methods: {
    submit() {
      const that = this;
      this.$refs.dataForm.validate((valid) => {
        if (!valid) return this.$message.error("必填参数不能为空");
        delete that.dataForm.saUserImg;
        that.dataForm.fileInfo = JSON.stringify(that.fileJson);
        that.dataForm.isCompete = this.step;
        that.buttonLoad = true;
        add(that.dataForm)
          .then((res) => {
            that.buttonLoad = false;
            if (res.code !== 200) return that.$message.error(res.msg);
            that.dataForm.id = res.data;
            if (this.step < 4) this.step++;
          })
          .cath(function () {
            that.buttonLoad = false;
          });
      });
    },
    bankChangeHandle(event) {
      this.dataForm.bnkNm = this.bankList.filter(
        (bk) => bk.code == event
      )[0].name;
      this.getlbkInfo("02");
    },
    uploadLicenseSuccess(json) {
      //营业执照上传成功
      console.log(json);
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "licensePic", json.url);
    },
    uploadlegalPersonidPositivePicSuccess(json) {
      //法人身份证正面
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "legalPersonidPositivePic", json.url);
    },
    uploadlegalPersonidOppositePicSuccess(json) {
      //法人身份证反面
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "legalPersonidOppositePic", json.url);
    },
    uploadopeningAccountLicensePicSuccess(json) {
      //开户正面
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "openingAccountLicensePic", json.url);
    },
    uploadsettlePersonIdcardOppositePicSuccess(json) {
      //结算人身份证反面
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "settlePersonIdcardOpposite", json.url);
    },
    uploadsettlePersonIdcardPositiveSuccess(json) {
      //结算人身份证正面
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "settlePersonIdcardPositive", json.url);
    },
    uploadbankCardPositivePicSuccess(json) {
      //银行卡正面
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "bankCardPositivePic", json.url);
    },
    uploadbankCardOppositePicPicSuccess(json) {
      //银行卡反面
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "bankCardOppositePic", json.url);
    },
    uploadstorePicSuccess(json) {
      //门头照片
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "storePic", json.url);
    },
    uploadletterOfAuthPicSuccess(json) {
      //非法人结算授权函
      if (json.code !== 200) return this.$message.error(json.msg);
      this.$set(this.fileJson, "letterOfAuthPic", json.url);
    },
    handleBankAreaChange: function (event) {
      this.dataForm.lbnkProv = event[0];
      this.dataForm.lbnkCity = event[1];
      this.getlbkInfo("01");
    },
    getlbkInfo(banktype) {
      getlbk(
        this.dataForm.lbnkProv,
        this.dataForm.lbnkCity,
        this.dataForm.bnkCd,
        banktype
      ).then((res) => {
        if (res.code === 200) {
          if (banktype === "02") this.fhList = res.data;
          else
            this.bankList = res.data.map((dt) => {
              return {
                name: dt.bankNm,
                code: dt.bankCd,
              };
            });
        }
      });
    },
    handleMerchantAreaChange(event) {
      const list = this.$refs.regArea.getCheckedNodes()[0].pathLabels;
      this.dataForm.regProvCd = event[0];
      this.dataForm.regCityCd = event[1];
      this.dataForm.regDistCd = event[2];
      this.dataForm.cprRegAddr = list.join("");
    },
    initMerchantArea: function () {
      //初始化商户地区Tree数据
      const areaALL = mArea();
      this.merchantArea = areaALL
        .filter((a) => a.pid === "1")
        .map((pro) => {
          return {
            label: pro.label,
            value: pro.id,
            children: areaALL
              .filter((a) => a.pid === pro.id)
              .map((cit) => {
                return {
                  label: cit.label,
                  value: cit.id,
                  children: areaALL
                    .filter((a) => a.pid === cit.id)
                    .map((co) => ({ label: co.label, value: co.id })),
                };
              }),
          };
        });
    },
    initBankAreaList: function () {
      const list = bankArea();
      this.bankAreaList = list
        .filter((a) => a.pid === "1")
        .map((pro) => {
          return {
            label: pro.label,
            value: pro.value,
            children: list
              .filter((pr) => pr.pid === pro.value)
              .map((rs) => ({ label: rs.label, value: rs.value })),
          };
        });
    },
  },
  created() {
    this.initMerchantArea();
    this.initBankAreaList();
    this.mccList = mcc();
    this.bankList = bank();
    if (this.$route.query.id)
      detail(this.$route.query.id).then((res) => {
        if (res.code !== 200) return that.$message.error(res.msg);
        this.dataForm = res.data;
        if (this.dataForm.regProvCd)
          this.merchants = [
            this.dataForm.regProvCd,
            this.dataForm.regCityCd,
            this.dataForm.regDistCd,
          ];
        if (this.dataForm.lbnkProv)
          this.bankAreas = [this.dataForm.lbnkProv, this.dataForm.lbnkCity];
        if (this.dataForm.saUserImg && this.dataForm.saUserImg.fileInfo)
          this.fileJson = JSON.parse(this.dataForm.saUserImg.fileInfo);

        this.getlbkInfo("02");
      });
  },
};
</script>
<style scoped>
.step_class {
  width: 90%;
  margin-top: 30px;
  margin-left: 5%;
  margin-bottom: 20px;
}
.input {
  width: 50%;
}
.warn {
  color: brown;
}
</style>